{% load static %}
{% load common_tags %}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 图书管理系统</title>
    <link href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <style>
        /* 自定义样式优化 */
        body {
            background-color: #f8f9fa;
        }

        .navbar {
            margin-bottom: 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .main-content {
            padding-top: 20px;
        }

        .sidebar {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 15px;
            margin-bottom: 20px;
        }

        .content-area {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .jumbotron {
            margin-bottom: 30px;
            border-radius: 8px;
        }

        .book-grid {
            margin-top: 20px;
        }

        .book-item {
            margin-bottom: 20px;
        }

        .thumbnail {
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease-in-out;
        }

        .thumbnail:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        @media (max-width: 768px) {
            .sidebar {
                margin-bottom: 20px;
            }

            .main-content {
                padding-top: 15px;
            }

            .jumbotron {
                padding: 30px 15px;
                margin-bottom: 20px;
            }

            .jumbotron h1 {
                font-size: 28px;
            }

            .jumbotron .lead {
                font-size: 16px;
            }

            .book-item {
                margin-bottom: 15px;
            }
        }

        @media (max-width: 576px) {
            .main-content {
                padding-top: 10px;
            }

            .content-area {
                padding: 15px;
            }

            .jumbotron {
                padding: 20px 10px;
            }

            .jumbotron h1 {
                font-size: 24px;
            }

            .jumbotron .lead {
                font-size: 14px;
            }

            .btn-lg {
                padding: 8px 16px;
                font-size: 16px;
            }
        }

        @media (min-width: 1200px) {
            .container {
                max-width: 1140px;
            }

            .book-item {
                margin-bottom: 25px;
            }
        }
    </style>
</head>

<body>
{#导航条栏部分#}
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'book:home' %}">图书管理系统</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="{% url 'author:home' %}">作者 <span class="sr-only">(current)</span></a>
                </li>
                <li><a href="{% url 'publish:home' %}">出版商</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">友情连接 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://ai.dddaidai.online:81/">AI-Zero-Code</a></li>
                        <li><a href="http://picture.dddaidai.online/">智能共享云图库</a></li>
                        <li role="separator" class="divider"></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入关键字">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<div class="container-fluid main-content">
    <div class="row">
        <!-- 侧边栏 -->
        <div class="col-md-3 col-lg-2">
            <div class="sidebar">
                {% adv adv_data %}
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="col-md-9 col-lg-10">
            <div class="content-area">
                <!-- Hero区域 -->
                <div class="jumbotron"
                     style="background-image: url('https://img95.699pic.com/photo/50119/3130.jpg_wh300.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
                    <div class="container">
                        <h1>欢迎来到世界上最大的图书平台!</h1>
                        <p class="lead">hello everyone, welcome to our book platform!</p>
                        <p><a class="btn btn-primary btn-lg" href="http://ai.dddaidai.online:81"
                              target="_blank"
                              role="button">了解更多精彩功能</a>
                        </p>
                    </div>
                </div>

                <!-- 图书展示区域 -->
                <div class="book-grid">
                    <div class="row">
                        {#渲染每一本图书#}
                        {% for book in book_data %}
                            <div class="col-sm-6 col-md-4 col-lg-3 book-item">
                                <div class="thumbnail">
                                    <img src="{{ book.cover }}" alt="{{ book.name }}" class="img-responsive">
                                    <div class="caption text-center">
                                        <h4>{{ book.name }}</h4>
                                        <p class="text-primary"><strong>{{ book.price }}元</strong></p>
{#                                        作者: <i>{{ book.author }}</i>#}
                                        <p>描述: {{ book.desc | truncatechars:15 }}</p>
                                        <p>
                                            <a href="#" class="btn btn-primary btn-sm" role="button">查看详情</a>
                                            <a href="#" class="btn btn-default btn-sm" role="button">加入购物车</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript files should be loaded at the end of body for better performance -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
</body>

</html>
